<template>
	<view class="addressBook">
		<view class="header">
			<image src="/static/images/index/gs.png" mode=""></image>
			<view class="title">
				<view class="name">{{userinfo.tenantName }}</view>
				<view class="focus">
					<view class="">共{{ totalUser }}人 |</view>
					<view class="noFocus">
						<view>{{ totalUserSubscribe }}人未开启通知提醒</view>
                         <view class="noticeBtn" @click="toTips">
                          <image src="/static/images/index/q.png" mode=""></image>
                         </view>
					
					</view>
				</view>
			</view>
		</view>
		<view class="bookList">
			<view class="bookList_item header" v-for="(item, index) in list" :key="index" @click="toDepart(item)" :style="{borderBottom:index==list.length-1?'none':'2rpx solid #eeeeee'}">
				<image src="/static/images/index/gs.png" alt=""></image>
				<view class="title">
					<view class="name">{{ item.deptName }}</view>
					<view class="focus">
						<view class="">共{{ item.user }}人 |</view>
						<view class="">{{ item.userSubscribe }}人未开启通知提醒</view>
					</view>
				</view>
			</view>
		</view> 
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { addressLsit, userAddress } from '@/apis/index.js';
export default {
	data() {
		return {
			list: [],
			totalUser: 0,
			totalUserSubscribe: 0
		};
	},
	computed: { 
		...mapState('user', ['userinfo']),
	},
 
	created() {
		this.fetchAddressList();
	},
	methods: {
		toDepart({ id, deptName, userSubscribe, user }) {
			const data = {
				id,
				deptName,
				userSubscribe,
				user
			};
			uni.navigateTo({
				url: '/subpages/addressBook/department?data=' + JSON.stringify(data),
				fail:(err)=>{
					console.log(err);
				}
			});
		},
		fetchAddressList() {
			uni.showLoading({
				title: '加载中',
				icon: 'none'
			}); 
			Promise.all([addressLsit({ deptId: ''}), userAddress({ deptId: this.userinfo.tenant_id })]).then(res => {
				if (res) {
					uni.hideLoading(); 
					this.list = res[0].data;
				}
				this.totalUser = this.list.reduce((sumData,key) => {
					return sumData + key.user;
				},0);
				this.totalUserSubscribe = this.list.reduce((sumData,key) => {
					return sumData + key.userSubscribe;
				},0);
			}); 
		},
		// 跳转公众号链接
		toTips() {
			uni.navigateTo({
				url:'/pages/index/components/indexWebView?url=' + 'https://mp.weixin.qq.com/s/Q3eCZGi6y9pv5z21TIcVhg'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.addressBook {
	height: 100%;
	background: #f3f6f8;

	.header {
		display: flex;
		background-color: #fff;
		padding: 30rpx 48rpx 20rpx 48rpx;
		image {
			width: 64rpx;
			height: 64rpx;
			margin-right: 14rpx;
		}

		.title {
			display: flex;
			flex-direction: column;
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
		}
		.focus {
			display: flex;
			font-size: 24rpx;
			color: #999;
			font-weight: normal;
			view:nth-child(1) {
				// border-right: 1rpx solid #999999;
				padding-right: 10rpx;
			}
			.noFocus {
				display: flex;
				align-items: center;
				// border-left: 1rpx solid #999999;
				image {
					width: 28rpx;
					height: 28rpx;
				}
				.noticeBtn{
					display: flex;
					width: 100rpx;
				}
			}
		}
	}
	.bookList {
		margin: 0 16rpx;
		margin-top: 16rpx;
		background-color: #fff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		.bookList_item {
			padding: 28rpx 0rpx;
			border-bottom: 2rpx solid #eeeeee;
			.name {
				font-size: 28rpx;
				margin-bottom: 4rpx;
			}
		}
	}
}
</style>
